<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-1.8.2.min.js"></script>

<script src="../layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="../layui/css/layui.css"  media="all">

</head>
<body>
<form id="seaform">
姓名:<input type="text" name="stuname" id="stuname3"/>
  性别:<input type="radio" name="sex" value="女"/>女
  	<input type="radio" name="sex" value="男"/>男
  	<input type="radio" name="sex" value=""/>不明确<br/>
  年级：<select id="grade">   <option value="">--请选择--</option>
    <option value="大一">--大一--</option>
    <option value="大二">--大二--</option>
    <option value="大三">--大三--</option>
    <option value="大四">--大四--</option>
  </select><br/>
  专业：<select id="major" >
    <option value="">请选择</option>
  </select>
  <input type="button"  value="检索" onclick="search()"/>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>


<!-- 头部 -->
<script id="toolbarDemo" type="text/html">


  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" id="in" lay-event="getCheckData">导入</button>
 
    <button class="layui-btn layui-btn-sm" id="add" onclick="addstu()" >添加</button>
  </div>



</script>



<!-- 修改表单 -->
<form class="layui-form" action="" lay-filter="updatestu" onsubmit="return false" >
<div class="layui-form-item" style="display: none" id="up">

<div class="layui-form-item" style="display: none">
      <label class="layui-form-label">学号</label>
      <div class="layui-input-inline" >
        <input name="stuid" id="stuid1" class="layui-input" type="text" autocomplete="off" >
    </div>
    </div>
<div class="layui-form-item">
      <label class="layui-form-label">名字</label>
      <div class="layui-input-inline">
        <input name="stuname" id="stuname1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-inline">
        <input name="stupassword" id="stupassword1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-inline">
        <input name="sex" id="sex1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-inline">
        <input name="status" id="status1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">系</label>
      <div class="layui-input-inline">
        <input name="department" id="department1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">专业</label>
      <div class="layui-input-inline">
        <input name="specialty" id="specialty1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">学历</label>
      <div class="layui-input-inline">
        <input name="degree" id="degree1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">已借书量（本）</label>
      <div class="layui-input-inline">
        <input name="stuborrowmaxnum" id="stuborrowmaxnum1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">最大借书数量（本）</label>
      <div class="layui-input-inline">
        <input name="stuborrowbooknum" id="stuborrowbooknum1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
     <div class="layui-form-item">
      <label class="layui-form-label">已还书（本）</label>
      <div class="layui-input-inline">
        <input name="stugivebooknum" id="stugivebooknum1" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
     <div class="layui-form-item">
      <label class="layui-form-label">年级</label>
      <div class="layui-input-inline">
        <input name="data1" id="data11" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">借书时间</label>
      <div class="layui-input-inline">
        <input name="data2" id="data21" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
     <div class="layui-form-item">
      <label class="layui-form-label">还书时间</label>
      <div class="layui-input-inline">
        <input name="data3" id="data31" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    
    <div class="layui-form-item">
    <div class="layui-input-block">
       <a class="layui-btn layui-btn-xs layui-btn-xs"  onclick="updateStudent()" lay-event="edit">修改</a>
    </div>
  </div>
  </div>
</form>

<!-- 修改按钮 -->
<script id="barDemo" type="text/html">
  <a class="layui-btn layui-btn-xs"   lay-event="edit">修改</a>
</script>
<!-- 添加表单 -->

<form class="layui-form" action=""   onsubmit="return false" >
<div class="layui-form-item" style="display: none" id="save" >
   <div class="layui-form-item">
      <label class="layui-form-label">学号</label>
      <div class="layui-input-inline" >
        <input name="stuid2" id="stuid2" class="layui-input" type="text" autocomplete="off" >
    </div>
   </div>
    <div class="layui-form-item">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-inline">
        <input name="stuname2" id="stuname2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-inline">
        <input name="stupassword2" id="stupassword2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-inline">
        <input name="sex2" id="sex2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-inline">
        <input name="status2" id="status2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">系</label>
      <div class="layui-input-inline">
        <input name="department2" id="department2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">专业</label>
      <div class="layui-input-inline">
        <input name="specialty2" id="specialty2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">学历</label>
      <div class="layui-input-inline">
        <input name="degree2" id="degree2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">已借书量（本）</label>
      <div class="layui-input-inline">
        <input name="stuborrowmaxnum2" id="stuborrowmaxnum2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">最大借书数量（本）</label>
      <div class="layui-input-inline">
        <input name="stuborrowbooknum2" id="stuborrowbooknum2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
     <div class="layui-form-item">
      <label class="layui-form-label">已还书（本）</label>
      <div class="layui-input-inline">
        <input name="stugivebooknum2" id="stugivebooknum2" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
     <div class="layui-form-item">
      <label class="layui-form-label">年级</label>
      <div class="layui-input-inline">
        <input name="data12" id="data12" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
      <div class="layui-form-item">
      <label class="layui-form-label">借书时间</label>
      <div class="layui-input-inline">
        <input name="data2" id="data22" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
     <div class="layui-form-item">
      <label class="layui-form-label">还书时间</label>
      <div class="layui-input-inline">
        <input name="data3" id="data32" class="layui-input" type="text" autocomplete="off" >
      </div>
    </div>
    
    
    <div class="layui-form-item">
    <div class="layui-input-block">
       <a class="layui-btn layui-btn-xs layui-btn-xs"  onclick="saveStudent()" lay-event="save">确认添加</a>
    </div>
  </div>
  </div>
</form>

<!--数据表格  -->
 
<script>


var tableStuinfo;
var indexupdate;
var indexsave;
var uploadInst;
$(function(){
	search();
	//下拉框
	$.ajax({
		url:"/queryMajor",
		data:{},
		dataType:"json",
		type:"post",
		success:function(res){
			if(res.length>0){
				for(var i =0;i<res.length;i++){
					$("#major").append("<option value='"+res[i]+"'>"+res[i]+"</option>");
				}
			}
		}
	})
	
})

function search(){
	var stuname=$("#stuname3").val();
	var sex = $("input[type='radio']:checked").val();
	var data1 = $("#grade option:selected").val();
	var specialty = $("#major option:selected").val();
	
	layui.use(['table','upload','form','jquery'], function(){
		 var table = layui.table;
		  var upload=layui.upload;
		  var $=layui.jquery;
		  var form=layui.form;
		  
		   tableStuinfo= table.render({
		    elem: '#test'
		    ,url:'/query'
		    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
		    	,where:{
			    	stuname:stuname,
			    	sex:sex,
			    	data1:data1,
			    	specialty:specialty
			    }
		    ,cols: [[
		      {field:'stuid', width:80, title: '学号', sort: true}
		      ,{field:'stuname', width:80, title: '姓名'}
		      ,{field:'stupassword', width:80, title: '密码'}
		      ,{field:'sex', width:80, title: '性别', sort: true}
		      ,{field:'status', width:80, title: '状态'}//0学生，1老师
		      ,{field:'department', title: '所在系', minWidth: 150}
		      ,{field:'specialty', width:80, title: '所在专业', sort: true}
		      ,{field:'degree', width:80, title: '学历', sort: true}
		      ,{field:'stuborrowmaxnum', width:80, title: '已借书量（本）'}
		      ,{field:'stuborrowbooknum', width:135, title: '最大借书数量（本）', sort: true}
		      ,{field:'stugivebooknum', width:135, title: '已还书（本）', sort: true}
		      ,{field:'data1', width:135, title: '年级', sort: true}
		      ,{field:'data2', width:135, title: '借书时间', sort: true}
		      ,{field:'data3', width:135, title: '还书时间', sort: true}
		      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
		    ]]
		    ,page: true
		  });
		   
		   uploadInst = upload.render({
			    elem: '#in'			    
			    ,url:'../inExcel' //改成您自己的上传接口
			    ,accept:'file'//普通文件
			    ,exts:'xls|xlsx'//只允许压缩文件
			   ,method:"post"
			    ,done: function(res){
			      if(res.success){
			    	  layer.msg(res.message);
			    	tableObj.reload();
			      }
			      
			    }
			
			  });
		   
		 //监听行工具，修改
		   table.on('tool(test)', function(obj){
		   	 
		   		    var data = obj.data;
		   		    //console.log(obj)
		   		    if(obj.event === 'edit'){
		   		    	form.val('updatestu',data);
		   		    	indexupdate = layer.open({
		   		    		type: 1,
		   		    		title:"修改学生信息",
		   		    		area: ['500px', '550px'],
		   		    		content:$("#up")
		   		    	})
		   		    }
		   		    
		   		  })
		   	  
	
		
		
	})
	
}

		  		  //修改方法
		  function updateStudent(){
			var stuid=$("#stuid1").val();
			var stuname=$("#stuname1").val();
			var stupassword=$("#stupassword1").val();
			var sex=$("#sex1").val();
			var status=$("#status1").val();
			var department=$("#department1").val();
			var specialty=$("#specialty1").val();
			var degree=$("#degree1").val();
			var stuborrowmaxnum=$("#stuborrowmaxnum1").val();
			var stuborrowbooknum=$("#stuborrowbooknum1").val();
			var stugivebooknum=$("#stugivebooknum1").val();
			var data1=$("#data11").val();
			var data2=$("#data21").val();
			var data3=$("#data31").val();
			$.ajax({
				url:"/update",
				data:{
					id:stuid,
					stuname:stuname,
					stupassword:stupassword,
					sex:sex,
					status:status,
					department:department,
					specialty:specialty,
					degree:degree,
					stuborrowmaxnum:stuborrowmaxnum,
					stuborrowbooknum:stuborrowbooknum,
					stugivebooknum:stugivebooknum,
					data1:data1,
					data2:data2,
					data3:data3
				},
				type:"post",
				dataType:"json",
				success:function(res){
					if(res){
						layer.close(indexupdate);
						tableStuinfo.reload();
					}else{
						layer.msg("修改失败");
					}
						
				}
			})
			
		  }
	
	 //添加
	function saveStudent(){
		var stuid=$("#stuid2").val();
		var stuname=$("#stuname2").val();
		var stupassword=$("#stupassword2").val();
		var sex=$("#sex2").val();
		var status=$("#status2").val();
		var department=$("#department2").val();
		var specialty=$("#specialty2").val();
		var degree=$("#degree2").val();
		var stuborrowmaxnum=$("#stuborrowmaxnum2").val();
		var stuborrowbooknum=$("#stuborrowbooknum2").val();
		var stugivebooknum=$("#stugivebooknum2").val();
		var data1=$("#data12").val();
		var data2=$("#data22").val();
		var data3=$("#data32").val();
		$.ajax({
			url:"../add",
			data:{
				stuid:stuid,
				stuname:stuname,
				stupassword:stupassword,
				sex:sex,
				status:status,
				department:department,
				specialty:specialty,
				degree:degree,
				stuborrowmaxnum:stuborrowmaxnum,
				stuborrowbooknum:stuborrowbooknum,
				stugivebooknum:stugivebooknum,
				data1:data1,
				data2:data2,
				data3:data3
			},
			type:"post",
			dataType:"json",
			success:function(res){
				if(res){
					layer.close(indexsave);
					tableStuinfo.reload();
				}else{
					layer.msg("添加失败");
				}
				 
			}
		})
		
	  }

	  //添加弹出层
	 function addstu(){
		  layui.use('layer',function(){
			  var layer = layui.layer;
			  indexsave= layer.open({
			       	type:1,//type必须是一
			           title: '添加学生信息',
			      		area: ['500px', '550px'],
			         content: $('#save')
			       });  
		  })
	  }
		   
	
	
  
</script>

</body>
</html>